<template>
    <view class="contant">
        <view class="top_view">请填写中国大陆身份证信息</view>
        <view class="cell_view">
            <view class="input_view">
                <view class="left_name">真实姓名</view>
                <input class="input" placeholder="请输入真实姓名" @input="nameChange" v-bind:value="form.name" placeholder-style="color: #D2D2D2;font-size: 32rpx;" />
            </view>
        </view>

        <view class="cell_view">
            <view class="input_view">
                <view class="left_name">身份证号</view>
                <input class="input" placeholder="请输入18位身份证号" @input="idChange" v-bind:value="form.id" placeholder-style="color: #D2D2D2;font-size: 32rpx;" />
            </view>
        </view>
        <view class="cell_view">
            <view class="input_view">
                <view class="left_name">手机号码</view>
                <input class="input" @input="codePhoneChange" v-bind:value="form.phone" placeholder-style="color: #D2D2D2;font-size: 32rpx;" placeholder="请输入您的手机号" />
            </view>
        </view>
        <view class="cell_view">
            <view class="input_view">
                <view class="left_name">验证码</view>
                <input class="input" placeholder="请输入验证码" @input="codeChange" v-bind:value="form.code" placeholder-style="color: #D2D2D2;font-size: 32rpx;" />
                <view class="code_btn" @click="codeClick()">获取验证码</view>
                <!-- v-if="changess" -->
                <!-- 				<view class="code_btn" @click="codeClick()" :disabled="disabled" v-else>
                  {{this.second}}后重试
                </view> -->
            </view>
        </view>
        <view class="top_view" style="margin:42rpx 0 38rpx">请上传身份证的正反面</view>

        <view class="add_pics">
              <view class="left-text" @click="chooseImage">
                <view class="name">头像面</view>
                <view class="myfont">上传身份证国徽面</view>
              </view>
                <view class="showPic">
                    <view class="id-card-front-box">
                        <image class="id_front" :src="$mConfig.imageUrl + '/image/id-card.png'"></image>
                    </view>
                </view>
        </view>
          <view class="add_pics" @click="chooseImage">
              <view class="left-text">
                <view class="name">头像面</view>
                <view class="myfont">上传身份证国徽面</view>
              </view>
              <view class="showPic">
                   <view class="id-card-back-box">
                        <image class="id_front" :src="$mConfig.imageUrl + '/image/id-card-back.png'"></image>
                   </view>
              </view>
        </view>
        <bottom-button  @sendFun="submit" text="确认提交"></bottom-button>
    </view>
</template>

<script>
// import {
//     postLoginRegister,
//     getSendSms
// } from '../../../../services/api.js';
// import graceChecker from '../../../../utils/graceChecker.js';
export default {
    onLoad() {
        // this.fetch();
    },
    data() {

        return {
            form: {
                name: '',
                id: '',
                phone: '',
                code: '',
            },
            selete: false,

            showText: true,
            second: 59,
            disabled: false,
            changess: true,
            submitBtn: true,
        }
    },
    methods: {
        async fetch() {
            // const res = await getBankCardList(0);
            // console.log(JSON.stringify(res));
            // if(res.code == 200){
            // 	this.cardList = res.result.records;
            // }else{
            // 	uni.showToast({
            // 		title: res.message,
            // 		icon: 'none'
            // 	})
            // }

        },
        changeBtn() {
            this.selete = !this.selete;
        },
        nameChange(e) {
            this.name = e.detail.value;
        },
        idChange(e) {
            this.id = e.detail.value;
        },
        phoneChange(e) {
            this.phone = e.detail.value;
        },
        codeChange(e) {
            this.code = e.detail.value;
        },
        async submit() {
          uni.navigateTo({
            url: '/pages/user/renzheng/realNameAuthentication'
          })
          return

            var sRule = [{
                name: "name",
                checkType: "string",
                checkRule: "1,20",
                errorMsg: "请输入真实姓名"
            },
            {
                name: "id",
                checkType: "idcard",
                checkRule: "18,18",
                errorMsg: "身份证为空或格式错误"
            },
            {
                name: "phone",
                checkType: "phoneno",
                checkRule: "",
                errorMsg: "手机号输入有误"
            },
            {
                name: "code",
                checkType: "notnull",
                checkRule: "",
                errorMsg: "验证码不能为空"
            },
            {
                name: "idcardFrontImg",
                checkType: "notnull",
                checkRule: "",
                errorMsg: "请上传身份证头像面"
            },
            {
                name: "idcardBackImg",
                checkType: "notnull",
                checkRule: "",
                errorMsg: "请上传身份证国徽面"
            },
            ];

            let checkRes = graceChecker.check(this.form, sRule)
            if (!checkRes) {
                uni.showToast({
                    title: graceChecker.error,
                    icon: "none"
                });
                return;
            }
        },
        chooseImage() {
            uni.chooseImage({
                count: 1,
                sourceType: ['album'],
                // success: function (res) {
                // 	const tempFilePaths = res.tempFilePaths;
                // 	uni.uploadFile({
                // 		url:'',
                // 		filePath:
                // 	})
                // }
            })
        },
        isPhone(value) {
            if (!/^1(3|4|5|6|7|8|9)\d{9}$/.test(value)) {
                return false
            } else {
                return true
            }
        },
        async codeClick() {
            // console.log('验证码');
            if (this.phone == '') {
                uni.showToast({
                    title: '请输入手机号',
                    icon: 'none'
                })
                return;
            }
            if (this.isPhone(this.phone) == false) {
                uni.showToast({
                    title: '手机号格式不正确',
                    icon: 'none'
                });
                return;
            }
            if (this.disabled == true) {
                return;
            }
            const res = await getSendSms(this.phone, 1);
            console.log(JSON.stringify(res));
            if (res.code == 200) {
                this.changess = false;
                this.disabled = true;
                this.showText = false;
                var interval = setInterval(() => {
                    this.second = this.second - 1;
                }, 1000);

                setTimeout(() => {
                    clearInterval(interval);
                    this.showText = true
                    this.second = 59
                    this.disabled = false
                    this.changess = true;
                }, 60000);
            } else {
                uni.showToast({
                    title: res.message,
                    icon: 'none'
                })
            }
        }
    }
}
</script>

<style lang="scss" scoped>
.contant{
  padding: 20rpx 30rpx 0;
  color: #222222;
 .top_view {
      font-size: 36rpx;
      font-weight: bold;
  }
  .input_view {
    height: 110rpx;
    display: flex;
    align-items: center;
    justify-content: baseline;
    position: relative;
    border-bottom: 1px solid #F1F1F1;
  }
   .left_name {
      font-size: 30rpx;
      font-weight: 600;
      position: absolute;
    }

    .input {
        font-size: 30rpx;
        font-weight: 400;
        color: #999;
        margin-left: 160rpx;
    }

    .code_btn {
        font-size: 26rpx;
        color: #fff;
        margin-left: 100rpx;
        background: #3A92FF;
        width: 184rpx;
        line-height: 50rpx;
        border-radius: 25rpx;
        text-align: center;
    }
    .add_pics{
      background: #F5F5FC;
      color: #999999;
      font-size: 28rpx;
      display: flex;
      justify-content: space-between;
      padding: 36rpx;
      margin-bottom: 54rpx;
      border-radius: 10rpx;
      .left-text{
        .name{
          color: #222;
          font-weight: bold;
          font-size: 36rpx;
        }
        .myfont {
            font-size: 28rpx;
            color: #999;
            margin-top: 26rpx;
        }
      }
    }
    .id_front {
        width: 322rpx;
        height: 212rpx;
    }
}
</style>
